﻿@inject Smartstore.Core.Stores.IStoreContext StoreContext

@{
    Layout = "_Document";

    var hasLeftCol = await Display.ZoneHasWidgetsAsync("left");
    var hasRightCol = await Display.ZoneHasWidgetsAsync("right");
    var hideLeftCol = ViewBag.HideLeftCol == true;
    var hideRightCol = ViewBag.HideRightCol == true;

    int mainColspan = 12;
    int cols = 1;
    if (hasLeftCol)
    {
        mainColspan -= 3;
        cols += 1;
    }
    if (hasRightCol)
    {
        mainColspan -= 3;
        cols += 1;
    }

    Assets.BodyAttributes.AppendCssClass("lyt-cols-" + cols);

    if (Display.GetThemeVariable<bool>("boxed"))
    {
        Assets.BodyAttributes.AppendCssClass("boxed");
    }
}

<div id="page" style="max-height:100vh;">
    <div class="canvas-blocker canvas-slidable"></div>

    <div class="page-main canvas-slidable">

        <header id="header" zone-name="header" replace-content="true">
            <div class="menubar-section d-none d-lg-block @(Display.GetThemeVariable<bool>("inverse-menubar") ? "menubar-inverse" : "menubar-light")">
                <div class="container menubar-container">
                    @await Component.InvokeAsync("TopBar")
                </div>
            </div>
            <div class="shopbar-section @(Display.GetThemeVariable<bool>("inverse-shopbar") ? "shopbar-inverse" : "shopbar-light")">
                <div class="container shopbar-container">
                    @await Component.InvokeAsync("ShopBar")
                </div>
            </div>
            <div class="megamenu-section d-none d-lg-block">
                <nav class="navbar @(Display.GetThemeVariable<bool>("inverse-navbar") ? "navbar-inverse" : "navbar-light")">
                    <div class="container megamenu-container">
                        <menu name="Main" template="Main" />
                    </div>
                </nav>
            </div>
        </header>

        <div id="content-wrapper">

            <partial name="JavaScriptDisabledWarning" />

            <zone name="content_before"></zone>

            <section id="content" class="container">
                <zone name="teaser"></zone>

                <partial name="Breadcrumb" model="null" />

                <div id="content-body" class="row">

                    @if (hasLeftCol)
                    {
                        <aside id="content-left" class="col-lg-3 mb-4 mb-lg-0" attr-class='(hideLeftCol, "d-none d-lg-block")'>
                            <zone name="aside_left_before"></zone>
                            <zone name="left"></zone>
                            <zone name="aside_left_after"></zone>
                        </aside>
                    }
                    
                    <div id="content-center" class="col-lg-@mainColspan">
                        <zone name="main_column_before"></zone>
                        @RenderBody()
                        <zone name="main_column_after"></zone>
                    </div>
                    @if (hasRightCol)
                    {
                        <aside id="content-right" class="col-lg-3 mt-4 mt-lg-0" attr-class='(hideRightCol, "d-none d-lg-block")'>
                            <zone name="aside_right_before"></zone>
                            <zone name="right"></zone>
                            <zone name="aside_right_after"></zone>
                        </aside>
                    }

                    <zone name="content_after"></zone>
                </div>
            </section>
        </div>

        <zone name="footer_before"></zone>

        <zone name="footer" replace-content="true">
            @await Component.InvokeAsync("Footer")
        </zone>

        <zone name="page-end"></zone>
    </div>

    <a href="#" id="scroll-top" class="scrollto d-flex align-items-center justify-content-center shadow-sm">
        <i class="fa fa-lg fa-angle-up"></i>
    </a>
</div>

<partial name="Notifications" />